<template>
  <div style="border: 1px solid; padding: 10px;">
    <h4>testReactive</h4>
    <p>data: {{ msg }}</p>
    <p>method: {{ getMsg() }}</p>
    <p>coco: {{ coco }}</p>
    <button @click="editMsg">editMsg</button>
    <button @click="editCoco">editCoco</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      coco: 'coco',
      msg: 'message'
    }
  },
  methods: {
    getMsg() {
      console.log('getMsg called')
      return this.msg
    },
    editMsg() {
      this.msg += 's'
    },
    // 修改coco时也会触发视图更新，调getMsg方法
    editCoco() {
      this.coco += 'coco'
    }
  }
}
</script>

<style>
</style>
